<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous" />
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div class="container-fluid" id="app">
    <div class="row">
        <div class="col-md-12 text-center" style="background-color: red; color: white" >
            <h3>蜗牛书店</h3>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <ol class="breadcrumb">
                <li v-for="bt in typelist"><a href="javascript:void(0)" :href="'/book/showBookView/?typeid='+bt.id" v-text="bt.name"></a></li>
            </ol>
        </div>

        <div class="col-md-3">
            <form class="form-inline">
                <div class="form-group">
                    <label for="search" class="sr-only">请输入关键词</label>
                    <input type="text" class="form-control" v-model="searchName" id="search" placeholder="请输入关键词">
                </div>
                <button type="button" @click.prevent="search" class="btn btn-default">搜索</button>
            </form>
        </div>

        <div class="col-md-3">
            <button type="button" class="btn btn-default btn-sm">个人中心</button>
            <button type="button" class="btn btn-default btn-sm">我的购物车</button>
            <button type="button" class="btn btn-default btn-sm">我的订单</button>
        </div>
    </div>

    <div class="row p-3">
        <div class="col-md-8">
            <select class="form-control" name="address" v-model="addressId">
                <option v-for="a in addressList" :value="a.id">{{a.province}}{{a.city}}{{a.area}}{{a.detailAddress}}  {{a.tel}}   {{a.reciver}}  </option>
            </select>
        </div>
        <div class="col-md-4">
           <a href="javascript:void(0)" class="btn btn-primary" data-toggle="modal" @click="openWin">新增地址</a>
        </div>
    </div>

    <div class="row">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <table class="table">
                        <tr>
                            <th>图书名称</th>
                            <th>图书图片</th>
                            <th>图书单价(元)</th>
                            <th>购买数量</th>
                            <th>小计</th>
                        </tr>
                        <tr v-for="c in buyCartList" >
                            <td v-text="c.bookName" style="height:60px;line-height: 60px">图书名称</td>
                            <td>
                                <img :src="c.bookSrc" style="width: 60px;height: 60px; border-radius: 50%"/>
                            </td>
                            <td v-text="c.bookPrice" style="height:60px;line-height: 60px">图书单价</td>
                            <td style="height:60px;line-height: 60px">
                                <input type="number" :id="'cart_'+c.bookId" :value="c.buyCount" @change="updateCount(c.bookId)" style="height: 25px;text-align: center;width: 80px"/>
                            </td>
                            <td v-text="c.sumPrice" style="height:60px;line-height: 60px">图书单价</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <b> 总价(元): {{allPrice}} </b>
                </div>

                <div class="col-md-6">
                    <button class="btn btn-success" @click="submitOrder">提交订单</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新增地址</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="provinceId">省</label>
                            <select class="form-control" id="provinceId" v-model="proName" placeholder="请选择省份" @change="changeCity">
                                <option value="">请选择省份</option>
                                <option v-for="p in proList" :value="p.id+'-'+p.name">
                                    <span>{{p.name}}</span>
                                </option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="cityId">市</label>
                            <select class="form-control" id="cityId" v-model="cityName" placeholder="请选择城市" @change="changeArea">
                                <option value="">请选择城市</option>
                                <option v-for="c in cityList" :value="c.id+'-'+c.name">
                                    <span >{{c.name}}</span>
                                </option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="areaId">区</label>
                            <select class="form-control" id="areaId" v-model="areaName" placeholder="请选择区域">
                                <option value="">请选择区域</option>
                                <option v-for="a in areaList" :value="a.id+'-'+a.name">
                                    <span>{{a.name}}</span>
                                </option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="detailAddress">详细地址</label>
                            <input type="text" class="form-control" id="detailAddress" placeholder="请输入详细地址">
                        </div>

                        <div class="form-group">
                            <label for="tel">手机号</label>
                            <input type="text" class="form-control" id="tel" placeholder="请输入手机号">
                        </div>

                        <div class="form-group">
                            <label for="reciever">收件人姓名</label>
                            <input type="text" class="form-control" id="reciever" placeholder="请输入收件人">
                        </div>
                        <div class="form-group">
                            <label for="code">邮编</label>
                            <input type="text" class="form-control" id="code" placeholder="请输入邮编">
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="isDefault" value="1"> 是否默认
                            </label>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" @click.prevent="addAddress">保存</button>
                </div>
            </div>
        </div>
    </div>



</div>


<script th:online="javascript">
    let vueApp = new Vue({
        el:"#app",
        data:{
            typelist:[],
            bookIds:[[${bookIds}]],
            addressId:1,
            addressList:[],
            proList:[],
            cityList:[],
            areaList:[],
            proName:'',
            cityName:'',
            areaName:'',
            buyCartList:[],
            allPrice:0.0
        },
        methods:{
            submitOrder(){
                let _this = this ;
                let url = "/order/addOrder" ;
                $.post(url,{
                    bookIds:_this.bookIds,
                    addressId:_this.addressId
                },function (data){
                    if (data == 'ok'){
                        alert("订单提交成功!");
                        // 转到我的订单页面
                        location.href = "/order.html" ;
                    }else {
                        alert(data) ;
                    }
                })
            },
            addAddress(){
                let _this = this ;
                let url = "/address/addAddress";
                //alert($("#proName").text());
                let params = {
                    "province":_this.proName.split('-')[1],
                    "city":_this.cityName.split('-')[1],
                    "area":_this.areaName.split('-')[1],
                    "detailAddress":$("#detailAddress").val(),
                    "tel":$("#tel").val(),
                    "reciver":$("#reciever").val(),
                    "emailCode":$("#code").val(),
                    "isDefault":$("#isDefault").val()
                };
                console.log(params)
                $.ajax({
                    url:url,
                    type:'post',
                    data:params,
                    //contentType:'application/json',
                    success:function (data){
                        if (data == 'ok'){
                            alert("添加地址成功!");
                            $("#myModal").modal('hide');
                            _this.initAddress();
                        }
                    }
                })
            },
            //打开新增地址模态框
            openWin(){
                $("#myModal").modal('show');
            },
            searchName(){

            },
            initBookType(){
                let _this = this ;
                let url = "/home/typeList" ;
                $.get(url,function (data){
                    console.log(data);
                    _this.typelist = data ;
                },"json")
            },
            initAddress(){
                let url = "/address/list" ;
                let _this = this;
                $.get(url,function (data){
                    for(let list of data){
                        if(list.isDefault == '1'){
                            _this.addressId = list.id ;
                        }
                    }
                    _this.addressList = data;

                },"json")
            },
            initProvince(){
                let url = "/china/province" ;
                let _this = this ;
                $.get(url,function (data){
                    _this.proList = data ;
                },"json");


            },
            changeCity(){
                let proName = $("#provinceId").val();
                let url = "/china/city?proId="+proName.split("-")[0] ;
                let _this = this ;
                $.get(url,function (data){
                    _this.cityList = data ;
                },"json");
                //把区域下拉框中的数据 干掉
                this.areaList = [] ;

            },
            changeArea(){
                let cityName = $("#cityId").val();
                let url = "/china/area?cityId="+cityName.split("-")[0] ;
                let _this = this ;
                $.get(url,function (data){
                    _this.areaList = data ;
                },"json");
            },
            initBuyCart(){
                let _this = this ;
                let url = "/cart/myBuyCart" ;
                $.post(url,{bookIds:_this.bookIds},function (data){
                    console.log(data)
                    _this.buyCartList = data.carts;
                    _this.allPrice = data.sumPrice ;
                },"json");
            }
        },
        created(){
            this.initBookType();
            this.initAddress();
            this.initProvince();
            this.initBuyCart();
        }
    })
</script>
</body>
</html>